<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:comp="http://java.sun.com/jsf/composite/register"
>
<h:head>
	<title>JSF 2.0 Hello World</title>
</h:head>
<ui:composition template="/templates/layout.xhtml">
	<ui:define name="content">

		<p:growl id="messages" showDetail="true" />
		
		<h:form id="form">
			<p:panel header="Accounts">
				
				<p:commandButton value="Add a new account" icon="ui-icon-add" oncomplete="addAccountDialog.show()" />
				
				<p:contextMenu for="accounts">
					<p:menuitem value="View" update=":view:viewAccountPanel" icon="ui-icon-search" oncomplete="viewAccountDialog.show()" />
					<p:menuitem value="Edit" update=":edit:editAccountPanel" icon="ui-icon-search" oncomplete="editAccountDialog.show()" />
					<p:menuitem value="Add" update=":add:addAccountPanel" icon="ui-icon-search" oncomplete="addAccountDialog.show()" />
					<p:menuitem value="Delete" update=":form:accounts" icon="ui-icon-close" actionListener="#{accountsController.deleteAccount}" />
				</p:contextMenu>
			
				<p:dataTable value="#{accountsController.accounts}" var="account" id="accounts" selectionMode="single" selection="#{accountsController.selectedAccount}" rowKey="#{account.id}"  >

					<p:column style="width:20px">
						<f:facet name="header">Id</f:facet>
						<h:outputText value="#{account.id}" />
					</p:column>
					
					<p:column style="width:150px">
						<f:facet name="header">Name</f:facet>
						<h:outputText value="#{account.name}" />
					</p:column>
	
					<p:column style="width:100px">
						<f:facet name="header">Description</f:facet>
						<h:outputText value="#{account.description}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">Currency</f:facet>
						<h:outputText value="#{account.currency.label}" />
					</p:column>
	
					<f:facet name="footer"></f:facet>
	
				</p:dataTable>  
			</p:panel>			
		</h:form>
		<h:form id="view">
			<p:dialog header="Account detail" showEffect="fade" widgetVar="viewAccountDialog" modal="true">
				<p:outputPanel id="viewAccountPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty accountsController.selectedAccount}">
						<h:outputLabel for="name" value="Name: " />
						<h:outputText id="name" value="#{accountsController.selectedAccount.name}" style="font-weight:bold" />
						<h:outputLabel for="description" value="Description: " />
						<h:outputText id="description" value="#{accountsController.selectedAccount.description}" style="font-weight:bold" />
						<h:outputLabel for="currency" value="Currency: " />
						<h:outputText id="currency" value="#{accountsController.selectedAccount.currency}" style="font-weight:bold" />
					</h:panelGrid>
					<p:commandButton value="Close" icon="ui-icon-cancel" oncomplete="viewAccountDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		<h:form id="edit">
			<p:dialog header="Edit account" showEffect="fade" widgetVar="editAccountDialog" modal="true">
				<p:outputPanel id="editAccountPanel">
					<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty accountsController.selectedAccount}">
						<h:outputLabel for="name" value="Name: " />
						<h:inputText id="name" value="#{accountsController.selectedAccount.name}" style="font-weight:bold" required="true"/>
						<h:outputLabel for="description" value="Description: " />
						<h:inputText id="description" value="#{accountsController.selectedAccount.description}" style="font-weight:bold" required="true"/>
						<h:outputLabel for="currency" value="Currency: " />
						<p:selectOneMenu id="currency" value="#{accountsController.selectedAccount.currency.id}" required="true">
							<f:selectItem itemLabel="Select currency" itemValue="" />
							<f:selectItems value="#{accountsController.currencies}" />
						</p:selectOneMenu>
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:accounts" icon="ui-icon-save" actionListener="#{accountsController.updateAccount}" oncomplete="editAccountDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="editAccountDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
		<h:form id="add">
			<p:dialog header="Add account" showEffect="fade" widgetVar="addAccountDialog" modal="true">
				<p:outputPanel id="addAccountPanel">
					<h:panelGrid columns="2" cellpadding="5">
						<h:outputLabel for="name" value="Name: " />
						<p:inputText id="name" value="#{accountsController.account.name}" style="font-weight:bold" required="true"/>
						<h:outputLabel for="description" value="Description: " />
						<p:inputText id="description" value="#{accountsController.account.description}" style="font-weight:bold" required="true"/>
						<h:outputLabel for="currency" value="Currency: " />
						<p:selectOneMenu id="currency" value="#{accountsController.account.currency.id}" required="true">
							<f:selectItem itemLabel="Select currency" itemValue="" />
							<f:selectItems value="#{accountsController.currencies}" />
						</p:selectOneMenu>
					</h:panelGrid>
					<p:commandButton value="Save" update=":form:accounts" icon="ui-icon-save" actionListener="#{accountsController.saveAccount}" oncomplete="addAccountDialog.hide()"/>
					<p:commandButton value="Cancel" icon="ui-icon-cancel" oncomplete="addAccountDialog.hide()" />
				</p:outputPanel>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>
</html>
